﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta name="viewport" http-equiv="Content-Type" content="text/html; charset=UTF-8;user-scalable=no, width=device-width, initial-scale=1.0" />
    <title></title>
    <link href="http://cdn.bootcss.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
    <link href="http://cdn.bootcss.com/Buttons/2.0.0/css/buttons.min.css" rel="stylesheet">
    <link href="http://cdn.bootcss.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
    <link rel="stylesheet" href="css/style.css" />
    <link href="css/pageStyle.css" rel="stylesheet" />
    <script src="http://cdn.bootcss.com/jquery/2.0.0/jquery.min.js"></script>
    <script src="http://cdn.bootcss.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
    <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
    <style>
        .shadow
        {
            -moz-box-shadow: 1px 1px 2px rgba(0,0,0,.2);
            -webkit-box-shadow: 1px 1px 2px rgba(0,0,0,.2);
            box-shadow: 1px 1px 2px rgba(0,0,0,.2);
        }
    </style>
</head>
<body style="padding: 0 15px 70px 0;">
    <div ng-app="myApp" class="container-fluid">
        <div id="divIndex">
            <div id="divHome">
                <div class="row header" style="text-align: center;">
                    <span class="glyphicon glyphicon-map-marker"></span>当前位置： 洲际酒店 <span class="glyphicon glyphicon-search"
                        style="float: right"></span>
                </div>
                <div class="row spliter">
                </div>
                <div ng-controller="discountCtrl" class="row">
                    <div ng-repeat="x in names">
                        <div class="col-xs-6 {{ x.style }}">
                            <div class="row">
                                <div class="col-xs-7 col-sm-6">
                                    <p style="color: {{ x .color; }}; padding-top: 10px; padding-left: 10px">
                                        {{ x.name }}</p>
                                    <p style="margin: 0px; color: gray; padding-left: 10px;">
                                        {{x.desc}}</p>
                                </div>
                                <div class="col-xs-5 col-sm-6" style="float: right; padding-top: 10px">
                                    <img alt="" class="img-responsive" src="{{x.img}}" />
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row spliter">
                </div>
                <div ng-controller="shopCtrl" id="divShops">
                    <div ng-repeat="x in names" class="row">
                        <div class="col-xs-12 col-sm-6 col-md-3" tag="shop">
                            <div class="row" style="padding: 10px 22px; font-size: 12px;">
                                <div class="col-xs-5 col-md-11 thumbnail" style="margin-bottom: 0px; padding: 0px;">
                                    <img src="{{x.img}}">
                                </div>
                                <div class="col-xs-7" style="padding-left: 5px;">
                                    <p style="margin: 0 0 5px">
                                        {{ x.name }}</p>
                                    <p>
                                        <img src="img/star.png" />
                                        <img src="img/star.png" />
                                        <img src="img/star.png" />
                                        <img src="img/empty-star.png" />
                                        <img src="img/empty-star.png" />
                                        <span style="color: gray;">&nbsp;&nbsp; {{x.desc}}</span>
                                    </p>
                                    <p>
                                        {{x.join}}： <span style="color: red">{{x.count}}</span></p>
                                </div>
                            </div>
                            <div class="row" style="padding: 0 22px; font-size: 12px; border-bottom: 1px solid #ddd;
                                padding-bottom: 0px; color: gray;">
                                <p>
                                    <i class="fl discount-icon icon i-first"></i>&nbsp;新用户首单立减五元 (在线支付专享)
                                </p>
                                <p>
                                    <i class="fl discount-icon icon i-minus"></i>&nbsp;满50元减5元
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div ng-controller="orderCtrl" id="divOrder" class="hidden">
                <div class="row header" style="text-align: center;">
                    <span class="glyphicon glyphicon-cutlery"></span>我的订单
                </div>
                <div ng-repeat="x in names" class="row">
                    <div class="col-xs-12 col-sm-6 col-md-3" tag="order">
                        <div class="row" style="padding: 10px 22px; font-size: 12px;">
                            <div class="col-xs-5 col-md-11 thumbnail" style="margin-bottom: 0px; padding: 0px;">
                                <img src="{{x.img}}">
                            </div>
                            <div class="col-xs-7" style="padding-left: 5px;">
                                <p style="margin: 0 0 5px">
                                </p>
                                <p>
                                    <img src="img/star.png" />
                                    <img src="img/star.png" />
                                    <img src="img/star.png" />
                                    <img src="img/empty-star.png" />
                                    <img src="img/empty-star.png" />
                                </p>
                                <p>
                                    {{x.name}} <span style="color: red">{{x.desc}}</span>
                                </p>
                                <p>
                                    {{x.date}} <span style="color: gray">{{x.time}}</span>
                                </p>
                            </div>
                        </div>
                        <div class="row" style="padding: 10px 10px 10px 25px; border-top: 1px solid #ddd;"
                            tag="shop">
                            {{x.shop}} <span class="glyphicon glyphicon-chevron-right" style="padding-left: 10px;
                                color: gray"></span><span style="float: right; font-size: 12px; color: red">{{x.status}}</span>
                        </div>
                        <div class="row spliter">
                        </div>
                    </div>
                </div>
            </div>
            <div id="divOrderDetails" class="hidden">
                <div class="row header" style="padding: 10px 25px 10px">
                    <a href="#" tag="back" style="color: white"><span class="glyphicon glyphicon-chevron-left">
                    </span></a>&nbsp; 精选缤纷礼遇 月月臻享特惠
                    <div style="float: right">
                        <a href="#"><span class="glyphicon glyphicon-share" style="color: white"></span>
                        </a>&nbsp;&nbsp;&nbsp; <a href="#"><span class="glyphicon glyphicon-heart" style="color: white">
                        </span></a>
                    </div>
                </div>
                <div>
                    <div class="row">
                        <table class="table table-bordered" id="tbOrderDetailsNav" style="font-size: 12px;
                            text-align: center; border-radius: 2px; margin-bottom: 0px;">
                            <tr>
                                <td style="padding: 0px;">
                                    <a href="#" class="list-group-item selected" tag="Details" style="border: 0px; padding: 6px;
                                        border-radius: 0px">订单详情</a>
                                </td>
                                <td style="padding: 0px;">
                                    <a href="#" class="list-group-item" tag="OrderStatus" style="border: 0px; padding: 6px;">
                                        订单状态</a>
                                </td>
                            </tr>
                        </table>
                    </div>
                    <div id="divSpecificDetails">
                        <div class="row spliter">
                        </div>
                        <div class="row">
                            <ul class="list-group" style="margin-bottom: 0px; padding-left: 10px;">
                                <li class="list-group-item">升级豪华套房 <span style="float: right">￥200*2 共 <span style="color: red">
                                    400 </span>元</span></li>
                                <li class="list-group-item">豪华烛光晚餐 <span style="float: right">￥250*2 共 <span style="color: red">
                                    500 </span>元</span></li>
                                <li class="list-group-item">洗衣服务 <span style="float: right">￥100*3 共 <span style="color: red">
                                    300 </span>元</span></li>
                                <li class="list-group-item">香氛精油SPA <span style="float: right">￥199*1 共 <span style="color: red">
                                    199-100=89 </span>元</span>
                                    <p style="margin: 5px 0; font-size: 12px; color: gray">
                                        <i class="fl discount-icon icon i-discount"></i>&nbsp;优惠商品，为您节省￥100.00
                                    </p>
                                </li>
                                <li class="list-group-item"><i class="fl discount-icon icon i-coupon"></i>&nbsp;优惠券
                                    <span style="float: right"><span style="color: red">- 5 </span>元</span></li>
                                <li class="list-group-item"><i class="fl discount-icon icon i-minus"></i>&nbsp;满100元减10元
                                    <span style="float: right"><span style="color: red">- 10 </span>元</span></li>
                                <li class="list-group-item"><span style="color: gray">总计￥1399 &nbsp; &nbsp; 优惠￥115 </span>
                                    <span style="float: right">实付<span style="color: red"> 1284 </span>元</span></li>
                            </ul>
                            <div class="spliter">
                            </div>
                            <ul class="list-group" style="margin-bottom: 0px; padding-left: 10px;">
                                <li class="list-group-item"><span style="color: gray">订单号码:</span><span style="padding-left: 10px">5678
                                    8821 3349 5593</span></li>
                                <li class="list-group-item"><span style="color: gray">订单时间:</span><span style="padding-left: 10px">2016-03-15
                                    18:18:18</span></li>
                                <li class="list-group-item"><span style="color: gray">支付方式:</span><span style="padding-left: 10px">在线支付</span></li>
                            </ul>
                        </div>
                        <div id="divOrderDetailFooter">
                            <nav class="navbar navbar-default navbar-fixed-bottom">
                                <div style="margin-bottom: 0px; padding: 4px 15px; font-size: 12px; text-align: center">
                                    <a href="#" class="button button-block button-rounded button-caution btn-lg-order-status">再来一单</a>
                                </div>
                            </nav>
                        </div>
                    </div>
                    <div id="divOrderStatus" class="hidden">
                        <div ng-controller="orderStatusCtrl" class="row" style="background-color: #eee; padding: 0 20px 0 30px">
                            <section id="cd-timeline" class="cd-container">
                                <div ng-repeat="x in names" class="cd-timeline-block">
                                    <div class="{{x.style}}">
                                        <button class="{{x.btn}}" style="width: 35px; height: 35px; line-height: 0px; font-size: 18px"><i class="{{x.img}}"></i></button>
                                    </div>

                                    <div class="cd-timeline-content">
                                        <h6>{{x.status}}</h6>
                                        <p style="color:gray">{{x.desc}}</p>
                                        <span class="cd-date">{{x.date}}</span>
                                    </div>
                                </div>
                            </section>
                        </div>
                        <div>
                            <nav class="navbar navbar-default navbar-fixed-bottom">
                                <div style="margin-bottom: 0px; padding: 4px 15px; font-size: 12px; text-align: center">
                                    <a href="#" class="button button-block button-rounded button-highlight btn-lg-order-status">订单投诉</a>
                                </div>
                            </nav>
                        </div>
                    </div>
                </div>
            </div>
            <div id="divUser" class="hidden">
                <div class="row header" style="padding: 0px 25px 10px;">
                    <div>
                        <div class="row">
                            <div class="col-xs-4" style="padding: 10px 0px 0px 25px;">
                                <img alt="" class="img-responsive img-circle" style="border: 2px solid rgba(0,0,0,0.075);
                                    max-height: 90px" src="http://www.bootcss.com/p/flat-ui/images/illustrations/colors.png" />
                            </div>
                            <div class="col-xs-8" style="padding-top: 30px;">
                                <div style="float: left;">
                                    Testing
                                    <p>
                                        13918293091</p>
                                </div>
                                <div style="float: right;">
                                    <a href="#"><span class="glyphicon glyphicon-chevron-right" style="color: white"></span>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row" style="padding: 0 0 10px 0; font-size: 12px; text-align: center;
                    background-color: white">
                    <div class="col-xs-4">
                        <h4 style="margin-bottom: 5px;">
                            <span style="color: red;">白金贵宾</span></h4>
                        当前等级 <span style="border-left: 1px solid #ddd; height: 42px; margin: -25px -18px 0 0;
                            padding: 0px; float: right;"></span>
                    </div>
                    <div class="col-xs-4">
                        <h4 style="margin-bottom: 5px;">
                            <span style="color: red;">3张</span></h4>
                        优惠券 <span style="border-left: 1px solid #ddd; height: 42px; margin: -25px -18px 0 0;
                            padding: 0px; float: right;"></span>
                    </div>
                    <div class="col-xs-4">
                        <h4 style="margin-bottom: 5px;">
                            <span style="color: red;">300</span></h4>
                        积分
                    </div>
                </div>
                <div class="row spliter">
                </div>
                <div class="row">
                    <ul class="list-group" style="margin-bottom: 0px; padding-left: 10px;">
                        <li class="list-group-item"><span class="glyphicon glyphicon-heart" style="color: red">
                        </span>我的收藏 <span style="float: right"><a href="#"><span class="glyphicon glyphicon-chevron-right"
                            style="color: gray"></span></a></span></li>
                        <li class="list-group-item"><span class="glyphicon glyphicon-book" style="color: red">
                        </span>我的日常 <span style="float: right"><a href="#"><span class="glyphicon glyphicon-chevron-right"
                            style="color: gray"></span></a></span></li>
                        <li class="list-group-item"><span class="glyphicon glyphicon-tower" style="color: red">
                        </span>我的成就 <span style="float: right"><a href="#"><span class="glyphicon glyphicon-chevron-right"
                            style="color: gray"></span></a></span></li>
                    </ul>
                    <div class="spliter">
                    </div>
                    <ul class="list-group" style="margin-bottom: 0px; padding-left: 10px;">
                        <li class="list-group-item"><span class="glyphicon glyphicon-comment" style="color: red">
                        </span>待点评 <span style="float: right"><a href="#"><span class="glyphicon glyphicon-chevron-right"
                            style="color: gray"></span></a></span></li>
                        <li class="list-group-item"><span class="glyphicon glyphicon-info-sign" style="color: red">
                        </span>关于 <span style="float: right"><a href="#"><span class="glyphicon glyphicon-chevron-right"
                            style="color: gray"></span></a></span></li>
                        <li class="list-group-item"><span class="glyphicon glyphicon-exclamation-sign" style="color: red">
                        </span>投诉与建议 <span style="float: right"><a href="#"><span class="glyphicon glyphicon-chevron-right"
                            style="color: gray"></span></a></span></li>
                    </ul>
                </div>
            </div>
        </div>
        <div id="divHomeFooter">
            <nav class="navbar navbar-default navbar-fixed-bottom">
                <div class="row" style="margin-bottom: 0px; padding: 4px 0; font-size: 12px; text-align: center">
                    <div class="col-xs-4" tag="home">
                        <div>
                            <p style="margin: 0px"><i class="icon i-home"></i></p>
                            <p style="margin: 0px">首页</p>
                        </div>
                    </div>
                    <div class="col-xs-4" tag="order">
                        <p style="margin: 0px"><i class="icon i-order"></i></p>
                        <p style="margin: 0px">订单</p>
                    </div>
                    <div class="col-xs-4" tag="user">
                        <p style="margin: 0px"><i class="icon i-user"></i></p>
                        <p style="margin: 0px">我的</p>
                    </div>
                </div>
            </nav>
        </div>
        <div id="divEvent" class="hidden">
            <div id="divHeader">
                <div class="row header">
                    <div style="padding: 0 0 10px 10px" id="divHeaderBtn">
                        <a href="#" tag="back"><span class="glyphicon glyphicon-chevron-left" style="color: white">
                        </span></a>
                        <div style="float: right">
                            <a href="#"><span class="glyphicon glyphicon-share" style="color: white"></span>
                            </a>&nbsp;&nbsp; <a href="#"><span class="glyphicon glyphicon-heart" style="color: white">
                            </span></a>
                        </div>
                    </div>
                    <div class="col-xs-4 col-md-2 col-sm-2">
                        <img src="http://ihg.scene7.com/is/image/ihg/uhf_ihg_logo@2x?fmt=png-alpha" class="img-responsive thumbnail" />
                    </div>
                    <div class="col-xs-8 col-md-10 col-sm-10">
                        <p>
                            <strong>出发，赏春光 </strong>
                        </p>
                        <p>
                            <span class="glyphicon glyphicon-star"></span><span class="glyphicon glyphicon-star">
                            </span><span class="glyphicon glyphicon-star"></span><span class="glyphicon glyphicon-star">
                            </span><span class="glyphicon glyphicon-star-empty"></span>4.5分
                        </p>
                    </div>
                </div>
                <div id="nav" class="row">
                    <table class="table table-bordered" id="tbNavigation" style="font-size: 12px; text-align: center;
                        border-radius: 2px; margin-bottom: 0px;">
                        <tr>
                            <td style="padding: 0px;">
                                <a href="#" class="list-group-item selected" tag="Menu" style="border: 0px; padding: 6px;
                                    border-radius: 0px">详情</a>
                            </td>
                            <td style="padding: 0px;">
                                <a href="#" class="list-group-item" tag="Details" style="border: 0px; padding: 6px;">
                                    聊天室</a>
                            </td>
                            <td style="padding: 0px;">
                                <a href="#" class="list-group-item" tag="Comments" style="border: 0px; padding: 6px;">
                                    评论</a>
                            </td>
                        </tr>
                    </table>
                </div>
            </div>
            <div id="divEventDetails">
            </div>
            <div id="divEventChat" class="hidden">
            </div>
            <div id="divComments" class="hidden">
                <div class="row well" style="margin-bottom: 0px; padding: 0 0 10px 0; font-size: 12px;
                    text-align: center">
                    <div class="col-xs-4">
                        <h2>
                            <b><span style="color: red;">4.6</span></b></h2>
                        总体评价 <span style="border-left: 1px solid #ddd; height: 38px; margin: -25px -18px 0 0;
                            padding: 0px; float: right;"></span>
                    </div>
                    <div class="col-xs-4">
                        <h2>
                            <b><span style="color: red;">4.5</span></b></h2>
                        好玩程度 <span style="border-left: 1px solid #ddd; height: 38px; margin: -25px -18px 0 0;
                            padding: 0px; float: right;"></span>
                    </div>
                    <div class="col-xs-4">
                        <h2>
                            <b><span style="color: red;">4.4</span></b></h2>
                        服务水平
                    </div>
                </div>
                <div ng-controller="commentCtrl" class="row">
                    <ul ng-repeat="x in names" class="media-list" style="padding: 22px; font-size: 12px;">
                        <li class="media" style="border-bottom: 1px solid #ddd; padding-bottom: 10px;"><a
                            class="pull-left" href="#">
                            <img class="media-object" src="{{x.img}}" alt="...">
                        </a>
                            <div class="media-body">
                                <img src="img/star.png" />
                                <img src="img/star.png" />
                                <img src="img/star.png" />
                                <img src="img/empty-star.png" />
                                <img src="img/empty-star.png" />
                                <span style="color: gray;">&nbsp;&nbsp; {{x.date}}</span>
                                <p style="padding-top: 10px;">
                                    {{x.comment}}</p>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</body>
</html>
<script>

    $.fn.smartFloat = function () {
        var position = function (element) {
            var top = element.position().top; //当前元素对象element距离浏览器上边缘的距离 
            var pos = element.css("position"); //当前元素距离页面document顶部的距离 
            $(window).scroll(function () { //侦听滚动时 
                var scrolls = $(this).scrollTop();
                if (scrolls > top) { //如果滚动到页面超出了当前元素element的相对页面顶部的高度 
                    if (window.XMLHttpRequest) { //如果不是ie6 
                        element.css({ //设置css 
                            position: "fixed", //固定定位,即不再跟随滚动 
                            top: 0,
                            left:0,
                            right: 0 //距离页面顶部为0 
                        }).addClass("shadow"); //加上阴影样式.shadow 
                    } else { //如果是ie6 
                        element.css({
                            top: scrolls  //与页面顶部距离 
                        });
                    }
                } else {
                    element.css({ //如果当前元素element未滚动到浏览器上边缘，则使用默认样式 
                        position: pos,
                        top: top
                    }).removeClass("shadow"); //移除阴影样式.shadow 
                }
            });
        };
        return $(this).each(function () {
            position($(this));
        });
    };

    $("#nav").smartFloat(); 

    $(document).ready(function () {

        $("#tbNavigation a").click(function () {
            var tag = $(this).attr('tag');
            $("#tbNavigation .selected").removeClass("selected");
            $(this).toggleClass("selected", 0);
            $("#div" + tag + "").removeClass();
            $("#divHomeFooter").hide();

            switch (tag) {
                case "Menu":
                    $("#divEventDetails").show();
                    $("#divComments").hide();
                    $("#divEventChat").hide();
                    break;
                case "Comments":
                    $("#divComments").show();
                    $("#divEventDetails").hide();
                    $("#divEventChat").hide();
                    break;
                case "Details":
                    $("#divEventChat").show();
                    $("#divEventDetails").hide();
                    $("#divComments").hide();
                    break;
            }
        });

        $("#tbOrderDetailsNav a").click(function () {
            var tag = $(this).attr('tag');
            $("#tbOrderDetailsNav .selected").removeClass("selected");
            $(this).toggleClass("selected", 0);
            $("#div" + tag + "").removeClass();
            $("#divHomeFooter").hide();

            switch (tag) {
                case "OrderStatus":
                    $("#divOrderStatus").show();
                    $("#divSpecificDetails").hide();
                    break;
                case "Details":
                    $("#divSpecificDetails").show();
                    $("#divOrderStatus").hide();
                    break;
            }
        });

        $("#divShops,#divOrder [tag='shop']").each(function () {
            $(this).click(function () {
                $("#divIndex").hide();
                $("#divEvent").removeClass().show();
            });
        });

        $("#divHomeFooter [tag='home']").each(function () {
            $(this).click(function () {
                $("#divOrder").hide();
                $("#divUser").hide();
                $("#divHome").removeClass().show();
            });
        });

        $("#divHomeFooter [tag='order']").each(function () {
            $(this).click(function () {
                $("#divHome").hide();
                $("#divUser").hide();
                $("#divOrder").removeClass().show();
            });
        });

        $("#divHomeFooter [tag='user']").each(function () {
            $(this).click(function () {
                $("#divHome").hide();
                $("#divOrder").hide();
                $("#divUser").removeClass().show();
            });
        });

        $("#divOrder [tag='order']").each(function () {
            $(this).click(function () {
                $("#divOrder").hide();
                $("#divOrderDetails").removeClass().show();
                $("#divHomeFooter").hide();
            });
        });

        $("#divHeaderBtn [tag='back']").each(function () {
            $(this).click(function () {
                $("#divEvent").hide();
                $("#divIndex").show();
                $("#divHomeFooter").show();
            });
        });

        $("#divOrderDetails [tag='back']").each(function () {
            $(this).click(function () {
                $("#divOrderDetails").hide();
                $("#divOrder").removeClass().show();
                $("#divHomeFooter").show();
            });
        });
    });

</script>
<script>

    var app = angular.module('myApp', []);

    app.controller('discountCtrl', function ($scope) {
        $scope.names = [
            { name: '大额满减', desc: '优惠你懂得', img: 'http://www.bootcss.com/p/flat-ui/images/illustrations/gift.png', color: 'deeppink', style: 'homeDiscount1' },
            { name: '自助活动', desc: '大家一起来', img: 'http://www.bootcss.com/p/flat-ui/images/illustrations/calendar.png', color: '#0880D7', style: 'homeDiscount2' },
            { name: '当地特产', desc: '买点送朋友', img: 'http://www.bootcss.com/p/flat-ui/images/illustrations/bag.png', color: '#E67E22', style: 'homeDiscount3' },
            { name: '一起聊吧', desc: '交个朋友呗', img: 'http://www.bootcss.com/p/flat-ui/images/illustrations/clipboard.png', color: 'green', style: 'homeDiscount4' }
        ];
    });

    app.controller('shopCtrl', function ($scope) {
        $scope.names = [
            { name: '精选缤纷礼遇 月月臻享特惠', desc: '月售100单', img: 'http://content.cn.ichotelsgroup.com/content/dam/china/ihg/cn/images/special-offers/landing/inc3092240_ihg-selection/inc3092240_ihg_selection_300x200_bg_80k.jpg', join: '参加人数', count: '20/50' },
            { name: '全新酒店，全新体验', desc: '月售320单', img: 'http://content.cn.ichotelsgroup.com/content/dam/china/ihg/cn/images/special-offers/landing/img_offer_4.jpg', join: '参加人数', count: '30/60' },
            { name: '出发，赏春光', desc: '月售500单', img: 'http://content.cn.ichotelsgroup.com/content/dam/china/ihg/cn/images/special-offers/landing/inc2990021_spring-2016/Spring_300x200_CNW.jpg', join: '参加人数', count: '100/150' },
            { name: '优惠常伴，无微不“智”', desc: '月售1000单', img: 'http://content.cn.ichotelsgroup.com/content/dam/china/ihg/cn/images/special-offers/landing/img_offer_9.jpg', join: '参加人数', count: '20/30' }
        ];
    });

    app.controller('orderCtrl', function ($scope) {
        $scope.names = [
            { name: '消费金额：', desc: '￥100元', date: '消费时间：', time: '2016-03-16', shop: '精选缤纷礼遇 月月臻享特惠', status: '订单完成', img: 'http://content.cn.ichotelsgroup.com/content/dam/china/ihg/cn/images/special-offers/landing/inc3092240_ihg-selection/inc3092240_ihg_selection_300x200_bg_80k.jpg' },
            { name: '消费金额：', desc: '￥85元', date: '消费时间：', time: '2016-03-15', shop: '优惠常伴，无微不“智”', status: '订单完成', img: 'http://content.cn.ichotelsgroup.com/content/dam/china/ihg/cn/images/special-offers/landing/img_offer_9.jpg' },
            { name: '消费金额：', desc: '￥56元', date: '消费时间：', time: '2016-03-15', shop: '全新酒店，全新体验', status: '订单完成', img: 'http://content.cn.ichotelsgroup.com/content/dam/china/ihg/cn/images/special-offers/landing/img_offer_4.jpg' },
            { name: '消费金额：', desc: '￥215元', date: '消费时间：', time: '2016-03-14', shop: '精选缤纷礼遇 月月臻享特惠', status: '订单完成', img: 'http://content.cn.ichotelsgroup.com/content/dam/china/ihg/cn/images/special-offers/landing/inc3092240_ihg-selection/inc3092240_ihg_selection_300x200_bg_80k.jpg' }
        ];
    });

    app.controller('commentCtrl', function ($scope) {
        $scope.names = [
            { comment: '服务不错哦，行程安排也很合理，五星好评！', date: '2016-03-15 20:22:20', img: 'http://p1.meituan.net/40.40/mmc/8fd17014c791cdf393bed473dab116ff3643.png' },
            { comment: '包车的司机老是抽烟，坑爹', date: '2016-03-14 21:21:21', img: 'http://p0.meituan.net/40.40/mmc/35ad1f9253761ea6ff822b5e659f234f3758.png' },
            { comment: '总体来说还是不错的，不过吃的东西不怎么好', date: '2016-03-14 13:13:21', img: 'http://p0.meituan.net/40.40/mmc/89bec9d64cde38d441cf976f751c482e3788.png' },
            { comment: '玩的不错，没有带我们去购物', date: '2016-03-14 12:12:30', img: 'http://p1.meituan.net/40.40/mmc/9eb02e99626203347ba0237ac7699f924241.png' }
        ];
    });

    app.controller('orderStatusCtrl', function ($scope) {
        $scope.names = [
            { btn: 'button button-raised button-action button-circle button-jumbo', style: 'cd-timeline-img cd-picture', date: '2016-03-15 17:30', status: '订单已提交', desc: '请耐心等待商家确认', img: 'glyphicon glyphicon-ok' },
            { btn: 'button button-raised button-action button-circle button-royal', style: 'cd-timeline-img cd-movie', date: '2016-03-14 21:21:21', status: '支付成功', desc: '', img: 'glyphicon glyphicon-credit-card' },
            { btn: 'button button-raised button-action button-circle button-jumbo', style: 'cd-timeline-img cd-picture', date: '2016-03-14 13:13:21', status: '商家已接单', desc: '商品准备中，进度请咨询商家', img: 'glyphicon glyphicon-ok-circle' },
            { btn: 'button button-raised button-action button-circle button-highlight', style: 'cd-timeline-img cd-movie', date: '2016-03-14 12:12:30', status: '商家已收到您的催单提醒', desc: '若10分钟内商家未回应可再次催单', img: 'glyphicon glyphicon-time' },
            { btn: 'button button-raised button-action button-circle button-jumbo', style: 'cd-timeline-img cd-movie', date: '2016-03-14 12:12:30', status: '商家回复', desc: '商品准备中，请耐心等候', img: 'glyphicon glyphicon-time' },
            { btn: 'button button-raised button-action button-circle button-caution', style: 'cd-timeline-img cd-movie', date: '2016-03-14 12:12:30', status: '订单完成', desc: '', img: 'glyphicon glyphicon-cutlery' }
        ];
    });


</script>
